<template>
  <view>
    <headerss title='我的资料'></headerss>

    <view class="container">

      <view class="avatar">
        <text>头像</text>
        <image src="../../static/img/tx.jpg" mode=""></image>
      </view>

      <view class="my_information">
        <view class="my_bottom">
          <view class="">
            <text>昵称</text>
          </view>
          <text class="jiantou">用户昵称</text>
        </view>
        <view class="my_bottom">
          <view class="">
            <text>手机号</text>
          </view>
          <text class="jiantou">12345678910 ></text>
        </view>
        <view class="my_bottom">
          <view class="">
            <text>修改密码</text>
          </view>
          <text class="jiantou">></text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    methods: {

    }
  }
</script>

<style scoped lang="scss">
  .container {
    padding: 30rpx 32rpx;


    .avatar {
      display: flex;
      justify-content: space-between;
      align-items: center;

      width: 686rpx;
      height: 140rpx;
      background: #FFFFFF;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      margin-bottom: 20rpx;
      padding: 0 30rpx;
    }

    image {
      width: 80rpx;
      height: 80rpx;
      background: #FFFFFF;
      border-radius: 50%;
    }
  }

  .my_information {
    width: 686rpx;
    height: 264rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 0 30rpx;

    .my_bottom {
      display: flex;
      justify-content: space-between;
      padding: 25rpx 0;
      border-bottom: 2rpx solid #EEEEEE;

      image {
        width: 36rpx;
        height: 36rpx;
        vertical-align: middle;
      }

      .jiantou {
        color: #999;
      }

      view text {
        margin-left: 10rpx;
        width: 112rpx;
        line-height: 22rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: #333333;
      }
    }

  }
</style>